<template>
        <div class="w-100 h-100">
        <containTemplete
         :title="'综合管廊统计'" 
         :secondTitles="['管廊基本信息','廊内管线类型统计','管廊项目数据的统计']"
         >
        
            <template #left>
                <div class="w-100 h-100">
                    <gljbxx :glData="[72,56,635,151]"></gljbxx>
                </div>
            </template>
            <template #middle>
                <div class="w-100 h-100">
                    <lngxlx 
                    v-if="typeData"
                    :glData="typeData" 
                    :sumdata="sumsdata"
                    :sumdata1="sumsdata1"
                    ></lngxlx>
                </div>
            </template>
            <template #right>
                <div class="w-100 h-100" >
                    <xmtj></xmtj>
                </div>
            </template>
        </containTemplete>
        </div>
</template>
    
<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import gljbxx from './gljbxx.vue';
import lngxlx from './lngxlx.vue';
import xmtj from './xmtj.vue';
import API from "@/network/api";
const typeData=ref();
const  sumsdata=ref();
const  sumsdata1=ref();
const getData=async()=>{
    let res =await API.pipe.GroupByType();
    typeData.value=res.data.list;
    sumsdata.value = res.data.list.map((item:any) => {
    return item.list.reduce((sum:any, entry:any) => {
        if (entry.name === "空管" || entry.name === "非空管") {
            return sum + parseInt(entry.value, 10);
        }
        return sum;
    }, 0);
});
sumsdata1.value = res.data.list.map((item:any) => {
    return item.list.reduce((sum:any, entry:any) => {
        if (entry.name === "空管" || entry.name != "非空管") {
            return sum + parseInt(entry.value, 10);
        }
        return sum;
    }, 0);
});
console.log(typeData.value.map((item:any)=>item.name),'sumsdata1');
}
onBeforeMount(()=>{
    getData();
})
// onMounted(()=>{
//     getData();
// })
</script>
    
<style scoped lang="less" >
    
</style>